<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>博客后台管理系统</title>
    <link rel="stylesheet" href="/assets/layui/css/layui.css">
</head>

<body>
    <div class="layui-layout layui-layout-admin">
        <!-- 导入公共页面 -->
        {{ include "./common/header.html" }}

        <!-- 导入公共页面 -->
        {{ include "./common/side.html" }}

        <div class="layui-body">
            <h1 style="text-align: center;margin: 50px">欢迎来到系统设置</h1>
            <div class="layui-btn-group" style="margin: 15px;">
                <!-- 点击跳转到系统设置添加页面 -->
                <a type="button" class="layui-btn" href="/addSystem">添加</a>
                <button type="button" class="layui-btn" id="btn">编辑log</button>
            </div>
            <!-- 内容主体区域 -->
            <div style="padding: 15px;">
                <table class="layui-table" id="cate" lay-filter="cate">

                </table>
            </div>
        </div>

    </div>

    <div class="layui-form-item" id="upload" style="display: none;">
        <div class="layui-inline">
  
  
          <label class="layui-form-label">上传图片</label>
          <div class="layui-input-inline">
            <form action="" id="form">
              <input style=" display: none;" type="file" name="file" lay-verify="file" autocomplete="off"
                onchange="fileChange(this,'#demo1')">
              <a class="layui-btn layui-btn-normal" id="upBtn">+ 上传图片</a>
              <br>
              <img class="layui-upload-img" style="width: 100px;" id="demo1">
              <br>
              <a class="layui-btn layui-btn-normal" id="load">上传</a>
            </form>
          </div>
        </div>
  
  
      </div>

</body>

<script src="/assets/layui/layui.js"></script>
<script>
    // 图片赋值 onchange
    let newPic;
    function fileChange(thia, ele, fn) {
        fn = fn || function () { };
        // 拿到文件描述
        let upFile = thia.files[0];

        // 文件处理
        let fileReder = new FileReader();
        // 读取文件
        fileReder.readAsDataURL(upFile);

        fileReder.onload = function (e) {
            // 转化为base64格式
            let imgba64 = e.target.result;
            // console.log(imgba64);
            $(ele).attr('src', imgba64);
            console.log($(ele));
            // console.log(upFile.name); 
            newPic = `${upFile.name}`
            // console.log(_newPic, 'pic');
            fn.call()
        }


    }
    layui.use('table', function () {
        var table = layui.table;
        var $ = layui.jquery;

        table.render({
            elem: '#cate'
            , url: '/setData',
            toolbar: '#cateTool'
            , cols: [[
                { field: 'id', width: 80, title: '序号', sort: true }
                , { field: 'name', width: 100, edit: 'text', title: '名称' }
                , { field: 'vaule', width: 80, edit: 'text', title: '值', sort: true }
                , {
                    fixed: "right", width: 150, title: '操作', templet: (obj) => {
                        return `
          <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
           
          `
                    }
                }
            ]]
        });

        // 监听单元格编辑
        table.on('edit(cate)', async function (obj) {
            const { data } = obj;
            const { code, message } = await $.post('/upSystemData', data)
            if (code === 0) {
                layer.msg(message)
            }
        });
        $("#load").click(function () {
        console.log(666);
        let formData = new FormData($('#form')[0]);
        $.ajax({
          type: "post",
          url: "/logDditPic",
          processData: false, //  jquery不需要处理数据
          contentType: false, // 不要设置编码
          data: formData,
        }).then(res=>{
          console.log(res);
        })
        //  logDditPic
        // console.log(from);
        return false
      })

        $('#btn').click(function () {
            console.log(111);
            $('input[name=file]').click();

            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                shadeClose: true,
                skin: 'yourclass',
                content: $('#upload')
            }); return false;
        })
        // 删除
        // 监听行工具事件
        table.on('tool(cate)', function (obj) {
            var data = obj.data;
            // console.log(obj.data)
            const id = data.id;
            const val = data.val
            // console.log(id);
            //删除
            if (obj.event === 'del') {
                layer.confirm('确定删除吗？', async function (index) {
                    let rows = await $.post(`/delSet/${id}`)
                    let { code, message } = rows
                    if (code === 0) {
                        layer.msg(message)
                        obj.del();
                        layer.close(index);
                        //刷新（重载）表格数据
                        // table.reload('cate')
                    } else {
                        layer.msg(message)
                    }

                });

                // 替换
            } else if (obj.event === 'upd') {
                layer.confirm('是否替换？', async function (index) {
                    layer.msg('确定')
                    $('#logoText').text(val)
                    layer.close(index);
                    localStorage.setItem('logoText', val)
                });
            }
        });


    });
</script>

</html>